<template>
  <div>
    <el-table
      class="f-table"
      :data="innerData"
      style="width: 100%;"
      v-loading="loading"
      header-row-class-name="f-table__header"
      @row-click="handleRowClick"
      :row-class-name="getRowClassName"
      @sort-change="handleSortChange"
      :max-height="showPagination ? null : tableMaxHeight || null"
      @selection-change="handleSelectionChange"
      :highlight-current-row="singleSelect"
      @current-change="handleCurrentChange"
      @expand-change="handleExpandChange"
      :row-key="getRowKeys"
      ref="table"
    >
      <el-table-column type="index" width="50" v-if="hasIndex">
      </el-table-column>
      <el-table-column
        type="selection"
        :reserve-selection="selectionRemember"
        width="55"
        v-if="hasSelection"
      ></el-table-column>
      <el-table-column type="expand" v-if="hasExpand">
        <template slot-scope="scope">
          <slot name="expand" :data="scope.row"> </slot>
        </template>
      </el-table-column>
      <template v-if="multiColumn">
        <el-table-column
          v-for="topColumnItem in columns"
          :key="topColumnItem.prop"
          :label="topColumnItem.label"
          class-name="f-table__top-column"
          header-align="center"
        >
          <el-table-column
            :fixed="columnItem.fixed || false"
            :class-name="
              columnItem.prop == 'operations'
                ? 'f-table__cell f-table__cell--operations'
                : 'f-table__cell'
            "
            v-for="columnItem in topColumnItem.children"
            :key="columnItem.prop"
            :prop="columnItem.prop"
            :label="columnItem.label"
            :width="columnItem.width"
            :min-width="columnItem.minWidth"
            :sortable="columnItem.serverSort ? 'custom' : false"
            :header-align="columnItem.align || 'left'"
            :align="columnItem.textAlign || 'left'"
          >
            <template slot-scope="scope">
              <template v-if="columnItem.inline">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :placement="columnItem.placement || 'bottom-start'"
                  :open-delay="300"
                >
                  <div
                    slot="content"
                    style="max-width: 400px; line-height: 1.8;"
                  >
                    {{ scope.row[columnItem.prop] }}
                  </div>
                  <div class="f-table__cell-inline">
                    <slot :name="columnItem.prop" :data="scope.row">
                      {{ scope.row[columnItem.prop] }}
                    </slot>
                  </div>
                </el-tooltip>
              </template>
              <template v-else>
                <slot :name="columnItem.prop" :data="scope.row">
                  {{ scope.row[columnItem.prop] }}
                </slot>
              </template>
            </template>
          </el-table-column>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column
          :fixed="columnItem.fixed || false"
          :class-name="
            columnItem.prop == 'operations'
              ? 'f-table__cell f-table__cell--operations'
              : 'f-table__cell'
          "
          v-for="columnItem in columns"
          :key="columnItem.prop"
          :prop="columnItem.prop"
          :label="columnItem.label"
          :width="columnItem.width"
          :min-width="columnItem.minWidth"
          :sortable="columnItem.serverSort ? 'custom' : false"
          :header-align="columnItem.align || 'left'"
          :align="columnItem.textAlign || 'left'"
        >
          <template slot-scope="scope">
            <template v-if="columnItem.inline">
              <el-tooltip
                class="item"
                effect="dark"
                :placement="columnItem.placement || 'bottom-start'"
                :open-delay="300"
              >
                <div slot="content" style="max-width: 400px; line-height: 1.8;">
                  {{ scope.row[columnItem.prop] }}
                </div>
                <div class="f-table__cell-inline">
                  <slot :name="columnItem.prop" :data="scope.row">
                    {{ scope.row[columnItem.prop] }}
                  </slot>
                </div>
              </el-tooltip>
            </template>
            <template v-else>
              <slot :name="columnItem.prop" :data="scope.row">
                {{ scope.row[columnItem.prop] }}
              </slot>
            </template>
          </template>
        </el-table-column>
      </template>
      <div slot="empty" class="f-table__empty">暂无数据</div>
    </el-table>
    <template v-if="showPagination && page.total > 0">
      <el-pagination
        v-if="hasTotal"
        v-show="!loading"
        style="text-align: center; margin-top: 10px;"
        @current-change="jumpPage"
        :current-page.sync="page.current"
        :page-size="page.size"
        layout="sizes, total, prev, pager, next"
        :total="page.total"
        :page-sizes="[10, 20, 50]"
        @size-change="handleSizeChange"
      ></el-pagination>
      <el-pagination
        v-else
        v-show="!loading"
        style="text-align: center; margin-top: 10px;"
        :page-size="page.size"
        layout="sizes, slot"
        :page-sizes="[10, 20, 50]"
        @size-change="handleSizeChange"
      >
        <template class="btn-box">
          <el-button
            type="plain"
            size="mini"
            @click="prevPage"
            :disabled="page.current == 1"
            >上一页</el-button
          >
          <el-button
            type="plain"
            size="mini"
            @click="nextPage"
            :disabled="innerData.length == 0"
            >下一页</el-button
          >
          <el-button
            type="plain"
            size="mini"
            @click="goFirstPage"
            :disabled="page.current == 1"
            >首页</el-button
          >
        </template>
      </el-pagination>
    </template>
  </div>
</template>

<script src="./script.js"></script>

<style lang="less" src="./style.less"></style>
